<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>味千拉面</title>
    <link href="static/32.png" rel="icon" sizes="32x32"/>
    <link href="static/192.png" rel="icon" sizes="192x192"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
    <style>
        html, body, main{
            height: 100%;
        }

        body{
            margin: 0;
            user-select: none;
            font: lighter 16px "微软雅黑";
        }
        body:before{
            content: '';
            z-index: -1;
            width: 3000px;
            height: 3000px;
            display: block;
            position: fixed;
            top: calc(50% - 1500px);
            left: calc(50% - 1500px);
            animation: bg-rotate 20s infinite linear;
            background: linear-gradient(45deg, #20b57d 40%, #258ec5 60%);
        }

        @keyframes bg-rotate {
            0%{ transform: rotate(0) }
            100%{ transform: rotate(360deg) }
        }

        a{
            text-decoration: none;
        }

        main{
            display: table;
            margin: 0 auto;
        }

        .content{
            padding-top: 50px;
            padding-bottom: 70px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        .logo{
            margin-bottom: 50px;
        }
        .logo img{
            height: auto;
            max-width: 100px;
            border-radius: 100%;
            border: 3px solid #fff;
            transition: transform 0.3s;
        }
        .logo img:hover{
            transform: scale(1.1, 1.1) rotate(1turn);
        }

        .links{
            max-width: 300px;
        }
        .links a{
            color: #fff;
            display: block;
            min-width: 80px;
            padding: 1em 2em;
            text-align: center;
            margin-bottom: 1em;
            border-radius: 100px;
            border: #fff 1px solid;
            transition: background 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
        }
        .links a:hover{
            color: #258ec5;
            background: #fff;
            transform: scale(1.1, 1.1);
        }
        .links a:active{
            opacity: 0.7;
            transform: scale(0.9, 0.9);
        }
        .links a:last-child{
            margin-bottom: 0;
        }

        footer{
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            position: fixed;
            text-align: center;
        }
        footer a{
            color: inherit;
        }
    </style>
</head>
<body>
<main class="container">
    <div class="content">
        <div class="logo">
            <img src="static/avatar.jpg" title="味千拉面的个人首页"/>
        </div>
        <div class="links">
            <a href="https://paugram.com">博客</a>
            <a href="http://weibo.com/234891753/" target="_blank">微博</a>
            <a href="http://music.163.com/#/user/home?id=7041859" target="_blank">网易云</a>
            <a href="http://steamcommunity.com/id/dreamer-paul/" target="_blank">Steam</a>
            <a href="https://github.com/dreamer-paul/" target="_blank">GitHub</a>
            <a href="https://space.bilibili.com/124512959/" target="_blank">哔哩哔哩</a>
        </div>
    </div>
</main>
<footer>
    <p>© 2017 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
</footer>
</body>
</html>